<template>
  <div class="region">
    <div class="option">
      <el-button class="up-resource" color="#0560FD" @click="uploadResource"
        ><SvgIcon icon-class="add" />上传资源
      </el-button>
    </div>
    <el-card class="region-card">
      <div class="item">
        <span>官方资源</span>
      </div>
      <div v-for="o in 4" :key="o" class="item">
        {{ 'List item ' + o }}
        <SvgIcon class="add" icon-class="ic_+" />
        <SvgIcon class="more" icon-class="more" />
      </div>
    </el-card>

    <el-card class="region-card">
      <div class="item">
        <span>我的资源</span>
      </div>
      <div v-for="o in 4" :key="o" class="item">
        {{ 'List item ' + o }}
        <!-- <SvgIcon class="more" icon-class="more" /> -->
        <SvgIcon class="add" icon-class="ic_+" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Road',
});

function uploadResource() {}
</script>

<style lang="less" scoped>
.region {
  height: 100%;
  padding: 0 10px 10px;
  .option {
    text-align: end;
    margin-bottom: 10px;
  }

  .region-card {
    margin-bottom: 10px;
    background: #3d3d3d;

    :deep(.el-card__body) {
      padding: 10px 8px 0px 8px;
      font-size: 12px;
      font-weight: 500;
      color: #ffffff;

      .item {
        height: 16px;
        line-height: 16px;
        margin-bottom: 16px;

        .more,
        .add {
          cursor: pointer;
          float: right;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
